<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!--绑定按键释放事件-->
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"><br>
        <!--按键别名，enter、left、right、delete、esc、tab（必须用keydown）等，按下对应按键才触发事件
            如果需要绑定的按键不在这些别名里，也可以用真名（通过event.key获取，如Enter）
            -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo2"><br>
        <!--大小写键需用caps-lock-->
        <input type="text" placeholder="按下CAPSLOCK提示输入" @keyup.caps-lock="showInfo2"><br>
        
         <!--自定义按键别名-->
         <input type="text" placeholder="按下huiche提示输入" @keyup.huiche="showInfo2"><br>

        <!--同时按下多个按键触发-->
        <input type="text" placeholder="按下CTRL+Y提示输入" @keyup.ctrl.y="showInfo2"><br>
       
        <div>输入的值:{{content}}</div>
    </div>
    <script>
        Vue.config.productionTip = false
        //为按键自定义别名，value为keycode
        Vue.config.keyCodes.huiche = 13

        let vm = new Vue({
            el: "#root", 
            data: {
                name: "sgg",
                content: "",
            },
            methods:{
                showInfo:function(event){
                    console.log(event.key) //event.key表示按键的真名
                    if(event.keyCode !== 13) { //判断是否是回车
                        return 
                    }
                    
                    //展示输入的值
                    console.log(event.target.value) 
                    this.content = event.target.value
                },
                showInfo2(event){
                    console.log(event.target.value) 
                    this.content = event.target.value
                }
            }
        })

    </script>
</body>
</html>